<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <!-- admin管理员  -->
      <el-menu v-if="user == 1" :default-active="menuActiveName || routing" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
        <!-- <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item> -->
        <el-menu-item index="totalFinance-balanceDetails" @click="$router.push({ name: 'totalFinance-balanceDetails' })">
          <icon-svg name="qianbao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">余额管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-packageManagement" @click="$router.push({ name: 'totalFinance-packageManagement' })">
          <icon-svg name="rili" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">账套管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Withdrawal" @click="$router.push({ name: 'totalFinance-Withdrawal' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">提现管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-settlementList" @click="$router.push({ name: 'totalFinance-settlementList' })">
          <icon-svg name="zhangdan" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">结算账单</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-chargeDetails" @click="$router.push({ name: 'totalFinance-chargeDetails' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">交易明细</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <icon-svg name="peizhi" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">系统配置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item @click="$router.push({ name: 'totalFinance-systemConfiguration' })" index="1-1">提现设置</el-menu-item>
            <el-menu-item @click="$router.push({ name: 'totalFinance-account' })" v-if="userName == 'admin'" index="1-2">账号设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

      <!-- 物业法人分公司  -->
      <el-menu v-if="user==0&&userType==1&&type == 1" :default-active="menuActiveName || routing" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
        <el-menu-item index="subFinance-balanceDetails" @click="$router.push({ name: 'subFinance-balanceDetails' })">
          <icon-svg name="qianbao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">提现管理</span>
        </el-menu-item>
        <el-menu-item index="subFinance-settlementList" @click="$router.push({ name: 'subFinance-settlementList' })">
          <icon-svg name="zhangdan" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">结算账单</span>
        </el-menu-item>
        <el-menu-item index="subFinance-chargeDetails" @click="$router.push({ name: 'subFinance-chargeDetails' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">交易明细</span>
        </el-menu-item>
        <el-menu-item index="subFinance-automatic" @click="$router.push({ name: 'subFinance-automatic' })">
          <icon-svg name="peizhi" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title" index="1">系统配置</span>
        </el-menu-item>
      </el-menu>

      <!-- 到家法人分公司  -->
      <el-menu v-if="user==0&&userType==1&&type == 2" :default-active="menuActiveName || routing" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
        <el-menu-item index="subFinance-balanceDetails" @click="$router.push({ name: 'subFinance-balanceDetails' })">
          <icon-svg name="qianbao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">提现管理</span>
        </el-menu-item>
        <el-menu-item index="subFinance-settlementList" @click="$router.push({ name: 'subFinance-settlementList' })">
          <icon-svg name="zhangdan" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">结算账单</span>
        </el-menu-item>
        <el-menu-item index="subFinance-chargeList" @click="$router.push({ name: 'subFinance-chargeList' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">交易明细</span>
        </el-menu-item>
        <el-menu-item index="subFinance-automatic" @click="$router.push({ name: 'subFinance-automatic' })">
          <icon-svg name="peizhi" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title" index="1">系统配置</span>
        </el-menu-item>
      </el-menu>

      <!-- 物业 -->
      <el-menu v-if="type == 1&&userType==2&&user==0" :default-active="menuActiveName || routing" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
        <el-menu-item index="subFinance-balanceDetalist" @click="$router.push({ name: 'subFinance-balanceDetalist' })">
          <icon-svg name="qianbao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">余额管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Withdrawal" @click="$router.push({ name: 'totalFinance-Withdrawal' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">提现管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Groupporty" @click="$router.push({ name: 'totalFinance-Groupporty' })">
          <icon-svg name="zhangdan" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">结算账单</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Groupproperty" @click="$router.push({ name: 'totalFinance-Groupproperty' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">交易明细</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <icon-svg name="peizhi" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">系统配置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item @click="$router.push({ name: 'totalFinance-systemConfiguration' })" index="1-1">提现设置</el-menu-item>
            <!-- <el-menu-item @click="$router.push({ name: 'totalFinance-account' })" v-if="userName == 'admin'" index="1-2">账号设置</el-menu-item> -->
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

      <!-- 到家 -->
      <el-menu v-if="type == 2&&userType==2&&user==0" :default-active="menuActiveName || routing" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
        <el-menu-item index="subFinance-balanceDetas" @click="$router.push({ name: 'subFinance-balanceDetas' })">
          <icon-svg name="qianbao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">余额管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Withdrawal" @click="$router.push({ name: 'totalFinance-Withdrawal' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">提现管理</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Grouphomeres" @click="$router.push({ name: 'totalFinance-Grouphomeres' })">
          <icon-svg name="zhangdan" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">结算账单</span>
        </el-menu-item>
        <el-menu-item index="totalFinance-Grouphome" @click="$router.push({ name: 'totalFinance-Grouphome' })">
          <icon-svg name="qian" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">交易明细</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <icon-svg name="peizhi" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">系统配置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item @click="$router.push({ name: 'totalFinance-systemConfiguration' })" index="1-1">提现设置</el-menu-item>
            <!-- <el-menu-item @click="$router.push({ name: 'totalFinance-account' })" v-if="userName == 'admin'" index="1-2">账号设置</el-menu-item> -->
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
  data () {
    return {
      dynamicMenuRoutes: [],
      routing: localStorage.getItem('routing'),
      userName: '',
      type: '',
      user: '',
      userType: ""
    }
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarLayoutSkin: {
      get () {
        return this.$store.state.common.sidebarLayoutSkin
      }
    },
    sidebarFold: {
      get () {
        return this.$store.state.common.sidebarFold
      }
    },
    menuList: {
      get () {
        return this.$store.state.common.menuList
      },
      set (val) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    menuActiveName: {
      get () {
        return this.$store.state.common.menuActiveName
      },
      set (val) {
        this.$store.commit('common/updateMenuActiveName', val)
      }
    },
    mainTabs: {
      get () {
        return this.$store.state.common.mainTabs
      },
      set (val) {
        this.$store.commit('common/updateMainTabs', val)
      }
    },
    mainTabsActiveName: {
      get () {
        return this.$store.state.common.mainTabsActiveName
      },
      set (val) {
        this.$store.commit('common/updateMainTabsActiveName', val)
      }
    }
  },
  watch: {
    $route: 'routeHandle'
  },
  created () {
    this.userName = localStorage.getItem('userName')
    this.user = localStorage.getItem('user')
    this.type = localStorage.getItem('type')
    this.userType = localStorage.getItem('userType')
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem('dynamicMenuRoutes') || '[]'
    )
    this.routeHandle(this.$route)
  },
  methods: {
    // 路由操作
    routeHandle (route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || '',
            params: route.params,
            query: route.query
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      } else {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || '',
            params: route.params,
            query: route.query
          }
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      }
    }
  }
}
</script>
